<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>入会申込情報入力</title>
  <link rel="stylesheet" href="/css/A1A01WA01A01%20入会申込情報入力.css">

</head>

<body>

<!-- 导航栏 -->
<div class="header">
  <div>カードサイト </div>|
  <div >
    <a href="" class="a1">お手続き </a>|
    <a href="" class="a1">お問い合わせ</a> |
    <a href="" class="a1">ログイン</a> |
    <a href="" class="a1">申請再開</a>
  </div>
</div>

<!-- 主要横幅区域 - 左右滚动效果 -->
<div class="main-banner">
  <div class="carousel-container" id="carousel">
    <div class="carousel-item">
      <img src="/images/head1.JPG" alt="Mastercard 横幅广告">
    </div>
    <div class="carousel-item">
      <img src="/images/head1.JPG" alt="VISA 横幅广告">
    </div>
    <div class="carousel-item">
      <img src="/images/head1.JPG" alt="JCB 横幅广告">
    </div>
  </div>

  <div class="carousel-controls" id="controls">
    <button class="active" data-index="0"></button>
    <button data-index="1"></button>
    <button data-index="2"></button>
  </div>
</div>

<!-- 卡片网格区域 -->
<div class="card-grid">
  <!-- 第一行 -->
  <div class="card-item">
    <a href="/apply/toqueren" class="card-link">
      <img src="/images/etc.jpg" alt="Mastercard 法人カード">
      <div class="card-label">Mastercard® 法人カード</div>
    </a>
  </div>
  <div class="card-item">
    <a href="#" class="card-link">
      <img src="/images/JCB法人.gif" alt="Mastercard 個人カード">
      <div class="card-label">Mastercard® 個人カード</div>
    </a>
  </div>
  <div class="card-item">
    <a href="#" class="card-link">
      <img src="/images/master_1.jpg" alt="Mastercard 個人ゴールドカード">
      <div class="card-label">Mastercard® 個人ゴールドカード</div>
    </a>
  </div>

  <!-- 第二行 -->
  <div class="card-item">
    <a href="#" class="card-link">
      <img src="/images/master_2.jpg" alt="VISA 法人カード">
      <div class="card-label">VISA 法人カード</div>
    </a>
  </div>
  <div class="card-item">
    <a href="#" class="card-link">
      <img src="/images/mastergold.jpg" alt="VISA 個人カード">
      <div class="card-label">VISA 個人カード</div>
    </a>
  </div>
  <div class="card-item">
    <a href="#" class="card-link">
      <img src="/images/visa_1.jpg" alt="VISA 個人ゴールドカード">
      <div class="card-label">VISA 個人ゴールドカード</div>
    </a>
  </div>

  <!-- 第三行 -->
  <div class="card-item">
    <a href="#" class="card-link">
      <img src="/images/master_2.jpg" alt="JCB 法人カード">
      <div class="card-label">JCB 法人カード</div>
    </a>
  </div>
  <div class="card-item">
    <a href="#" class="card-link">
      <img src="/images/mastergold.jpg" alt="JCB 個人カード">
      <div class="card-label">JCB 個人カード</div>
    </a>
  </div>
  <div class="card-item">
    <a href="#" class="card-link">
      <img src="/images/etc.jpg" alt="JCB 個人ゴールドカード">
      <div class="card-label">JCB 個人ゴールドカード</div>
    </a>
  </div>
</div>

<!-- 底部版权信息 -->
<div class="footer">
  Copyright © H - All Rights Reserved
</div>

<script>

  window.onload = function() {
    // 检查是否有注册成功的标记
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('registerSuccess') === 'true') {
      // 显示成功提示
      alert('信用卡申请成功');
    }
  };



  // 轮播图控制逻辑
  const carousel = document.getElementById('carousel');
  const controls = document.getElementById('controls');
  const buttons = controls.querySelectorAll('button');
  let currentIndex = 0;

  // 自动轮播
  setInterval(() => {
    currentIndex = (currentIndex + 1) % buttons.length;
    updateCarousel();
  }, 5000);

  // 更新轮播图
  function updateCarousel() {
    carousel.style.transform = `translateX(-${currentIndex * 100}%)`;

    // 更新指示器状态
    buttons.forEach((button, index) => {
      button.classList.toggle('active', index === currentIndex);
    });
  }

  // 控制按钮点击事件
  buttons.forEach(button => {
    button.addEventListener('click', () => {
      currentIndex = parseInt(button.getAttribute('data-index'));
      updateCarousel();
    });
  });
</script>
</body>

</html>